最近,软件开发设计公司 The Software House 针对 2022 年前端市场状态的调查显示,84% 的受访者都在使用 TypeScript,43% 的受访者甚至认为 TypeScript 将超越 JavaScript 成为前端开发的主要语言。

无论 TypeScript 是否会超越 JavaScript,可以肯定的是,TypeScript 已被开发人员普遍接受,和 ES6 语法以及前端框架一起,被视为前端开发领域的基础工具。但是,关于 TypeScript 的质疑却一直没有减少,比如:

  • TypeScript 限制了 JavaScript 的灵活性;
  • TypeScript 并不能提高应用程序的性能;
  • TypeScript 开发需要更多额外的类型代码。

这些质疑其实可以归纳为一点:TypeScript 会影响实际项目的开发效率。事实真的是这样吗?

# 为什么说 TypeScript 可能超越 JavaScript?

我们知道,JavaScript 一直以灵活性著称。在实际开发时,我们不需要确定一个变量的类型,就能直接访问可能并不存在的属性,所以无需为每一步操作都定义类型。在小型项目中,这种灵活性可以有效提高开发效率,帮助我们掌控全局。

但随着项目规模的增大,这些变量类型的数量也会成倍增加,你总有记错、遗漏的时候。此时,灵活性就变成了埋在项目内的定时炸弹。在《Top 10 JavaScript errors from 1000+ projects (opens new window)》 中,最常见的错误就是 Cannot read property 'xxx' of undefinedundefined is not a function 等。这些错误就是我们过度依赖灵活性的后果,一旦它们被触发,就会导致你的页面白屏、卡死,甚至崩溃。

要解决灵活性带来的隐患,我们需要的是类型。更准确地说,是项目开发时的类型检查能力。 TypeScript 通过易上手且功能强大的类型系统,为 JavaScript 提供了强大的类型检查能力。在类型的帮助下,我们无需实际运行代码,就能通过类型的流转观察到变量的值是如何改变的。同时,类型的标记也能帮助我们确保每一处访问、赋值与操作的类型是符合预期的,有效减少我们需要承受的心智负担。

由于类型的引入,TypeScript 的确限制了 JavaScript 的灵活性,但也增强了项目代码的健壮性,并且对于其他同属于灵活性的代表特性,如 this、原型链、闭包以及函数等,TypeScript 丝毫没有限制。

但是,想要获得类型的帮助,我们需要额外的类型代码。这会影响开发效率吗?会有影响,但更多是正向的。

首先,要实现类型的精确标注,我们并不一定需要大量的类型代码。就像你给变量 A 新增一些属性得到变量 B,你会完全重新声明这两个变量的值吗?不会。在类型层面也是一样,变量 B 的类型会基于变量 A 的类型派生得到,它们并不是两个完全独立的类型。基于这一方式,我们就能让类型之间存在紧密的关联,减少冗余的类型代码。

其次,当项目规模增大到某一阈值后,这些类型代码会是你开发时最得力的助手,让你有底气大胆地进行各种逻辑操作,不需要先把这些值都打印出来确认一遍。同时,由于 TypeScript 强大的类型推导能力,随着你对变量进行各种操作,TypeScript 就会自动地推导出变量最终的类型。你只需要确保类型符合,最终的结果就是符合你预期的。而在你敲击下 . 来访问一个变量的属性时,TypeScript 也会将所有的属性展示出来供你挑选。这就是类型代码对开发效率的提升所在。

而在最终编译时,TypeScript 又会将这些类型代码抹除,还给你可以直接放进浏览器里跑的、纯粹的 JavaScript 代码。因此,TypeScript 确实不能提高应用程序的性能,因为最终运行的仍然是 JavaScript。

总的来说,TypeScript 对开发效率的影响和项目的规模息息相关。在小项目中,TypeScript 确实不可避免地降低了项目的开发效率。但如果我们放眼于项目的整个生命周期,得益于严密的类型检查与如臂使指的类型推导,TypeScript 不仅避免了 JavaScript 灵活性可能会带来的隐患,还能让你在面对 Bug 时更快地定位问题,让程序跑得更稳定一些!从这个方面来说,TypeScript 对开发效率的提升是终身制的。

# 如何系统学习 TypeScript?

随着越来越多的前端开发者开始尝试学习和使用 TypeScript,理论上 TypeScript 应该已经完全取代 JavaScript 了,但实际上并没有。一方面,就像我们前面所说,项目规模较小或部分开发者仍然更偏爱灵活的 JavaScript 。另一方面,作为 JavaScript 中不存在的概念,类型能力相关的学习成本让很多开发者停留在入门阶段,无法前进。

许多时候,高昂的学习成本往往来自于我们对 TypeScript 不正确的认知,以及错误的学习路径。比如说,有人认为“把类型相关的概念学习完就算掌握 TypeScript 了”,有人过了一遍文档和社区文章,简单地上手使用一下,就觉得自己的 TypeScript 水平已经相当不错了。

首先,通过社区资源自学并没有什么问题,但好内容太少,找起来也需要很多时间。其次,任何知识点都不能孤立地学习。不然在实际开发时,遇到一个复杂点的类型编程场景,我们就束手无策了。

那么,我们到底该怎么学习 TypeScript 呢?学习没有捷径,最好的学习方法就是先建立起对事物的全面认知,然后由浅入深地系统学习。 这里的“全面”如何理解?我们首先要了解 TypeScript 是由哪些部分组成的。相对严谨来说,TypeScript 由三个部分组成:类型、语法与工程。我们可以从这三个部分入手,来建立起一个全面、系统的学习路径。

首先是类型能力。它是最核心的部分,也是学习成本最高的部分。它为 JavaScript 中的变量、函数等概念提供了类型的标注,同时内置了一批类型工具,基于这些类型工具我们就能实现更复杂的类型描述,将类型关联起来。你可以从最简单的类型开始,每学到一个新的类型能力就添加上去,思考它和已掌握部分的交相融合,以此一步步掌握整个类型系统。

接着是语法部分。TypeScript 提前支持了一些已经到达 Stage 3 / 4 阶段,或是比较重要的 TC39 提案,比如使用最多的可选链(?.)、空值合并(??)、装饰器等,这些语法都已经或即将成为 ECMAScript Next 的新成员。在 TypeScript 中使用这些新语法时,你只需要简单的配置就能实现语法的降级,让编译后的代码可以运行在更低的浏览器或 Node 版本下。这一部分几乎没有学习成本,他们就像语言的 API,你只需要多提醒自己去使用,及时查询官方文档就能熟悉了。

类型能力与新语法确实很棒,但浏览器不认怎么办?TypeScript 会在构建时被抹除类型代码与语法的降级。这一能力就是通过 TypeScript Compiler(tsc)实现的。tsc 以及 tsc 配置(TSConfig)是 TypeScript 工程层面的重要部分。除此以外,TypeScript 工程能力的另一重要体现就是,我们可以通过类型声明的方式,在 TypeScript 中愉快地使用 JavaScript 社区的大量 npm 包。

类型、语法、工程其实也代表了三个不同阶段使用 TypeScript 目的:为 JavaScript 代码添加类型与类型检查来确保健壮性,提前使用新语法或新特性来简化代码,以及最终获得可用的 JavaScript 代码。因此,类型-语法-工程,也是学习 TypeScript 的最佳路径。

# 这门课程是如何设计的?

按照我们上面讲到的学习路径,这门课程也将分为类型能力篇、语法篇和工程实践篇。从下图中也能看出,我们会将重点更多地放在类型部分。

img

我们会从 TypeScript 的类型基础开始学习,然后到泛型、条件类型等这些首次见面的类型工具。在这些类型工具的学习与使用中,我们会遇到许多困惑。这时不妨转换下方向,来了解 TypeScript 的类型系统,包括它是如何进行类型比较的,以及整个类型世界的运行规则是怎样的。这一步将帮助你从根源上理解 TypeScript 的类型能力设计与底层运行规则。

掌握了类型工具与类型系统后,我们才会学习类型能力最复杂的概念:类型编程。这部分我们会从内置工具类型讲解到内置工具类型进阶,带你循序渐进地掌握类型编程中的 4 大范式。

通过这一路线,你将建立起全面的 TypeScript 类型能力知识体系,懂得如何结合使用各种类型工具来进行类型编程,如何独立解决各种类型报错,以及最重要的能力——理解类型世界的基本规则与运行规律。

迈过了类型这座大山以后,我们将面对新朋友:语法,它们比类型部分轻松友好多了。我们会从 TypeScript 与 ECMAScript 的关系开始说起,介绍这些新语法的使用,对其中的重量级角色装饰器,我们更会搭配实战。

在最后的工程部分,除了我们已经提到的 tsc 以及 TSConfig ,我们还会有更多的工程场景实战,类型声明与类型指令,与 React / ESLint 等框架或工具的紧密结合,开发并部署一个基于 TypeScript 的 Node API 。就像这本小册的名字《 TypeScript 全面进阶指南 》一样,我们的目标是全方位、无死角地掌握 TypeScript 。

# 写在最后

无论你处于哪个阶段,只要想开始学习 TypeScript,这门课程就是适合你的。只要你沿着课程中给出的路线,完成这一路上的各种任务,就一定能从新手成功迈向高级玩家。

同时我也希望,你可以把它当作一本备忘手册,时常回顾和翻阅。比如说,当你忘记了 never 类型的具体意义,当你忘记了 tsconfig 的某一个配置具体作用,当你忘记了某一类工具类型的实现原理,你都可以回来在小册中找到答案。

最后,也欢迎你在交流群或 GitHub 仓库的 issue 区,与我交流 TypeScript 学习路上的问题。除了与其他读者互相交流解惑以外,我也会安排固定的答疑时间来统一解决问题,期待与你一同进步。

# 课程中的代码

小册中的所有代码都会存放在 TypeScript-Tiny-Book (opens new window) 这个仓库里,基于 Monorepo 架构来隔离了各个不同部分的示例代码,同时在每一节也会给出对应代码的地址。

Last Updated: 4/25/2024, 11:59:12 PM